<script setup lang="ts">
defineProps<{
  collapsed: boolean
}>()
</script>

<template>
  <div class="sidebar" :class="{ 'sidebar-collapsed': collapsed }">
    <h2>导航菜单</h2>
    <ul>
      <li>菜单项1</li>
      <li>菜单项2</li>
      <li>菜单项3</li>
    </ul>
  </div>
</template>

<style scoped>
.sidebar {
  width: 250px;
  height: 100%;
  background-color: #304156;
  color: white;
  transition: all 0.3s ease;
  overflow: hidden;
}
.sidebar-collapsed {
  width: 64px;
}
h2 {
  padding: 20px;
  white-space: nowrap;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 12px 20px;
  white-space: nowrap;
  cursor: pointer;
}
li:hover {
  background-color: #263445;
}
</style>
